<template>
  <div>
    <el-dialog
      title="员工信息"
      :visible.sync="show"
      width="641px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-transfer
        v-model="dataList"
        :data="userList"
        :titles="['机构员工', '门店员工']"
        filterable
        filter-placeholder="请输入员工姓名"
        :props="{
          key: 'userId',
          label: 'nickName',
        }"
      >
        <span slot-scope="{ option }">
          {{ option.nickName }}({{ option.userName }})
        </span>
        <div slot="right-footer" class="store-name">{{ info.name }}</div>
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listUser } from "@/api/mc/user";
import { listStoreUser, updateStoreUser } from "@/api/mc/store";

export default {
  name: "StoreUser",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 门店信息
    info: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.reset();
        this.queryParams.institutionId = this.info.institutionId;
        this.getList();
        this.getStoreUserList();
      } else {
        this.reset();
      }
    },
  },
  data() {
    return {
      userList: [], // 全部员工列表
      dataList: [], // 已选员工列表
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        type: 2,
        institutionId: null,
      },
    };
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listUser(this.queryParams).then((res) => {
        this.userList = res.rows;
      });
    },
    // 获取已选门店员工列表
    getStoreUserList() {
      listStoreUser(this.info.id).then((res) => {
        this.dataList = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.show = false;
      this.$emit("cancel");
    },
    // 表单重置
    reset() {
      this.dataList = [];
    },
    // 提交表单
    submitForm() {
      updateStoreUser({
        storeId: this.info.id,
        userId: this.dataList.join(","),
      }).then((res) => {
        this.$modal.msgSuccess("保存成功");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.store-name {
  margin-left: 10px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
